<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D变换</title>
		<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
		<style type="text/css">
			.box{
				height: 400px;
				width: 400px;
				border: 1px solid blue;
				
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
				/* perspective要给父元素设置
				 * 让3D场景有近大远小的效果
				 * 不可集成属性，但它可以作用于后代元素，不是作用于自己的
				 *
				 * 原理：
				 *		景深越大，灭点越远，元素变形越小
				 *		景深越小，灭点越近，元素变形越大
				 *
				 * 景深叠加：要尽量避免景深的叠加(给多个父元素定义)
				 *
				 *
				 * 景深基点：perspective-origin：50% 50%；（ 默认值）
				 *		视角的位置
				 *		要perspective和perspective-origin配合使用：
				 *		perspective控制z轴，perspective-origin控制x,y
				 *		然后使用transform
				 */
				perspective: 500px;
				perspective-origin:left top;
			}
			.inner{
				height: 200px;
				width: 200px;
				background-color: #BBFFAA;
				border: 1px solid blue;
				text-align: center;
				font: 50px/200px "微软雅黑";
				/* border-radius: 50%; */
				
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
				/* transition: 1s; */
				/* 配合景深基点，直接看到变形效果 */
				transform: rotateX(45deg);
			}
			.box:hover .inner{
				/* transform: rotateX(360deg); */
				/* transform: rotate3d(x,y,z,angle); */
				/* transform: rotate3d(1,1,1,360deg); */
				
				/* z不能是百分比 
				* translateZ是3D transfom特有的，translateZ也不能是百分比，这样的值没有意义
				*/
				/* transform: translate3d(-50%,-50%,-100px); */
				
				/* 
				 *scaleZ(number)
				 *scale3d(scaleX,scaleY,scaleZ)
				 *只设置scaleZ(number)需要和translateZ(length)配合使用
				 *number*length得到的值是元素沿着Z轴移动的距离，从而感觉被扩大或压缩
				 */
				/* 相当于往前走100 */
				/* transform:translateZ(100px) scaleZ(2); */
				/* 相当于往前走200 */
				/* transform:scaleZ(2) translateZ(100px); */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner">
				Hello
			</div>
		</div>
	</body>
</html>
